<div class="wsl-box wsl-min-h-screen-3 mx-auto flex items-center">
  <div class="md:grid md:grid-cols-7">
    <div class="p-8 md:col-span-4">
      <div class="mb-4" *ngIf="data?.apiKey">
        <h2 class="mb-2 text-3xl font-medium text-black dark:text-gray-300">
          Submit Your First Version
        </h2>
        <div>
          <p class="mb-4 text-black dark:text-gray-300">
            Use our open-source SDKs to describe the behavior and performance of
            your code by capturing values of interesting variables and runtime
            of important functions from anywhere within your code.
          </p>
        </div>
        <div class="mb-3 flex w-full">
          <div
            class="min-w-[5rem] whitespace-nowrap rounded-l border border-r-0 border-gray-300 bg-gray-100 p-2 text-center text-xs font-medium text-black dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">
            API Key
          </div>
          <div
            class="flex max-w-sm flex-grow cursor-pointer items-center overflow-x-auto whitespace-nowrap border border-gray-300 bg-white px-2 font-mono text-xs text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400"
            (click)="data.apiKey.toggle()">
            {{ data.apiKey.value }}
          </div>
          <div
            class="flex cursor-pointer justify-center rounded-r border border-l-0 border-gray-300 bg-gray-100 p-2 text-xs font-medium text-sky-600 duration-300 ease-in-out hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-900"
            ngxClipboard
            [cbContent]="data.apiKey.plain"
            (cbOnSuccess)="onCopy($event, 'API Key')">
            <ng-icon
              title="Copy API Key to clipboard"
              name="heroClipboardDocument"
              size="1rem" />
          </div>
        </div>
        <div class="mb-3 flex w-full">
          <div
            class="min-w-[5rem] whitespace-nowrap rounded-l border border-r-0 border-gray-300 bg-gray-100 p-2 text-center text-xs font-medium text-black dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300">
            API URL
          </div>
          <div
            class="flex max-w-sm flex-grow items-center overflow-x-auto whitespace-nowrap border border-gray-300 bg-white px-2 font-mono text-xs text-gray-500 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-400">
            {{ data.apiUrl }}
          </div>
          <div
            class="flex cursor-pointer justify-center rounded-r border border-l-0 border-gray-300 bg-gray-100 p-2 text-xs font-medium text-sky-600 duration-300 ease-in-out hover:bg-gray-200 dark:border-gray-600 dark:bg-gray-800 dark:hover:bg-gray-900"
            ngxClipboard
            [cbContent]="data.apiUrl"
            (cbOnSuccess)="onCopy($event, 'API URL')">
            <ng-icon
              title="Copy API URL to clipboard"
              name="heroClipboardDocument"
              size="1rem" />
          </div>
        </div>
      </div>
      <div>
        <p class="mb-4 text-black dark:text-gray-300">
          If this is your first time, select your preferred programming language
          for documentation and examples to help you get started with Touca.
        </p>
        <div class="grid grid-cols-[repeat(4,_minmax(auto,_100px))] gap-4">
          <a href="https://touca.io/docs/basics/submit?sdk=cpp" target="_blank">
            <div
              class="rounded-md border border-gray-200 bg-gray-50 p-4 duration-300 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-900">
              <img
                class="w-full"
                src="./assets/exticons/client-cpp.svg"
                alt="Logo of C++ Language" />
            </div>
          </a>
          <a
            href="https://touca.io/docs/basics/submit?sdk=python"
            target="_blank">
            <div
              class="rounded-md border border-gray-200 bg-gray-50 p-4 duration-300 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-900">
              <img
                class="w-full"
                src="./assets/exticons/client-python.svg"
                alg="Logo of Python Language" />
            </div>
          </a>
          <a href="https://touca.io/docs/basics/submit?sdk=js" target="_blank">
            <div
              class="rounded-md border border-gray-200 bg-gray-50 p-4 duration-300 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-900">
              <img
                class="w-full"
                src="./assets/exticons/client-js.svg"
                alt="Logo of JavaScript Language" />
            </div>
          </a>
          <a
            href="https://touca.io/docs/basics/submit?sdk=java"
            target="_blank">
            <div
              class="rounded-md border border-gray-200 bg-gray-50 p-4 duration-300 ease-in-out hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-900">
              <img
                class="w-full"
                src="./assets/exticons/client-java.svg"
                alt="Logo of Java Language" />
            </div>
          </a>
        </div>
      </div>
    </div>
    <div class="hidden md:col-span-3 md:flex md:items-center md:justify-center">
      <img
        class="md:mx-auto md:w-3/4"
        src="./assets/undraw/undraw_blank_canvas_3rbb.svg" />
    </div>
  </div>
</div>
